<script setup lang="ts">
import { useDisplay } from 'vuetify'
import AppCard from './components/AppCard.vue'
import AppMain from '@/components/AppMain.vue'
import { useI18n } from 'vue-i18n';
import { useTitle } from '@/events/title';

const { t } = useI18n()
useTitle(t('about.name'))

const version = __VERSION__
interface DeveloperItem {
  avatar?: string
  title: string
  summary: string
  qq?: number
}

const developers: DeveloperItem[] = [
  {
    qq: 2034635947,
    title: "@秋歌",
    summary: "大 BOSS",
  },
  {
    qq: 2140125724,
    title: "@Eddie",
    summary: "PWA 应用开发者",
  },
  {
    qq: 1298589907,
    title: "@小白BZS",
    summary: "图标制作者，v2 版网页开发者",
  },
  {
    qq: 1362883587,
    title: "@🍊漪涟里梦 .ƎHTƎ⅃",
    summary: "后端开发",
  },
  {
    qq: 3290712646,
    title: "@机不可失V",
    summary: "软件开发",
  },
  {
    avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
    title: "@Riclroll摇",
    summary: "未知",
  },
  {
    avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
    title: "@落后群主50年的鸡子蛋",
    summary: "未知",
  },
  {
    avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
    title: "@张",
    summary: "未知",
  },
  {
    avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
    title: "@总督",
    summary: "未知",
  },
  {
    avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
    title: "@群鸽子，时不时摆烂",
    summary: "未知",
  },
]

const { mobile, mdAndUp } = useDisplay()

</script>

<template>
  <v-app-bar flat border="b">
    <v-btn icon="mdi-arrow-left" @click.stop="$router.back" />
    <v-app-bar-title>{{ $t('about.name') }}</v-app-bar-title>
  </v-app-bar>
  <v-navigation-drawer v-if="!mobile" permanent :width="(mdAndUp ? 200 : 156) + 32">
    <AppCard />
  </v-navigation-drawer>
  <app-main>
    <v-container class="container">
      <AppCard v-if="mobile" />
      <v-list lines="two" active-class="noActivatedOverlay">
        <!-- 关于应用 -->
        <v-list-subheader>{{ $t('app.about') }}</v-list-subheader>
        <!-- 应用版本 -->
        <v-list-item prepend-icon="mdi-information-outline" :title="$t('app.version')" :subtitle="version">
        </v-list-item>
        <v-divider></v-divider>
        <!-- 开发者信息 -->
        <v-list-subheader>{{ $t('develop.message') }}</v-list-subheader>
        <v-list-item v-for="item in developers" :key="item.title"
          :prepend-avatar="item.avatar || `https://q1.qlogo.cn/g?b=qq&nk=${item.qq}&s=100`" :title="item.title"
          :subtitle="item.summary">
        </v-list-item>
      </v-list>
    </v-container>
    <!-- </div> -->
  </app-main>
</template>

<style scoped>
.container {
  padding: 0;
}
</style>
